<template>
  <div class="settings">
    <el-card shadow="never">
      <template #header>
        <span>系统设置</span>
      </template>

      <el-form :model="form" label-width="150px" style="max-width: 600px">
        <el-form-item label="考试及格分数">
          <el-input-number v-model="form.passScore" :min="0" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item label="最大考试次数">
          <el-input-number v-model="form.maxAttempts" :min="1" :max="10"></el-input-number>
        </el-form-item>
        <el-form-item label="每次考试题目数">
          <el-input-number v-model="form.questionCount" :min="5" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item label="考试时长(分钟)">
          <el-input-number v-model="form.examDuration" :min="10" :max="180"></el-input-number>
        </el-form-item>
        <el-form-item label="系统名称">
          <el-input v-model="form.systemName" placeholder="请输入系统名称"></el-input>
        </el-form-item>
        <el-form-item label="系统描述">
          <el-input
            v-model="form.systemDesc"
            type="textarea"
            rows="4"
            placeholder="请输入系统描述"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSave">保存设置</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const defaultSettings = {
  passScore: 60,
  maxAttempts: 2,
  questionCount: 20,
  examDuration: 60,
  systemName: '新生入学教育考试系统',
  systemDesc: '为新生提供入学教育和知识考核的在线系统'
}

const form = reactive({ ...defaultSettings })

const loadSettings = () => {
  const saved = localStorage.getItem('systemSettings')
  if (saved) {
    Object.assign(form, JSON.parse(saved))
  }
}

const handleSave = () => {
  localStorage.setItem('systemSettings', JSON.stringify(form))
  ElMessage.success('设置已保存')
}

const handleReset = () => {
  Object.assign(form, defaultSettings)
  ElMessage.info('已重置为默认设置')
}

onMounted(() => {
  loadSettings()
})
</script>

<style scoped>
.settings {
  width: 100%;
}

:deep(.el-card) {
  width: 100%;
}
</style>

